<template>
  <header-nav />
  <manager-hearder />
  <div class="table">
    <div class="table-header">
      <el-button @click="handleAdd()">添加</el-button>
      <el-button @click="handleEditList">修改分类</el-button>
      <el-input v-model="word" placeholder="单词" @keyup="getList">
        <template #append>搜索</template>
      </el-input>
    </div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" prop="id" width="55" />
      <el-table-column label="英语" prop="enWord" width="120" />
      <el-table-column label="中文" prop="zhWord" width="120" />
      <el-table-column label="英语(全)" prop="enFullWord" />
      <el-table-column label="类型" :formatter="formatterCategory" />
      <el-table-column label="创建时间" prop="createDate" />
      <el-table-column label="修改时间" prop="updateDate" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="dialogTypeVisible" title="修改类型" width="300px" center>
    <el-select v-model="ListType" class="m-2" placeholder="类型">
      <el-option v-for="item in categoryList" :key="item.name" :label="item.name" :value="item.id" />
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleTypeConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible" title="字典" width="380px" center>
    <el-form :model="form">
      <el-form-item label="英语" label-width="80px">
        <el-input v-model="form.enWord" />
      </el-form-item>
      <el-form-item label="中文" label-width="80px">
        <el-input v-model="form.zhWord" />
      </el-form-item>
      <el-form-item label="英语(全)" label-width="80px">
        <el-input v-model="form.enFullWord" />
      </el-form-item>
      <el-form-item label="类型" label-width="80px">
        <el-select v-model="form.type" class="m-2" placeholder="类型" multiple>
          <el-option v-for="item in categoryList" :key="item.name" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { manager } from '@/api/manager'
import HeaderNav from '@/components/common/HeaderNav.vue'
import ManagerHearder from '@/components/manager/ManagerHearder.vue'
import { Category, Word } from '@/model/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

const tableData = ref([])
const categoryList = ref([] as Category[])
const current = ref(1)
const size = ref(10)
const total = ref(0)
const currentId = ref(0)
const dialogFormVisible = ref(false)
const dialogTypeVisible = ref(false)
const ListType = ref('')
const word = ref('')

const multipleSelection = ref<[]>([])
const typeMap: Map<number, Category> = new Map()

const form = reactive({
  enWord: '',
  zhWord: '',
  enFullWord: '',
  type: ''
})

const formatterCategory = (row: Word) => {
  return row.categoryList.join(',')
}

const handleEditList = () => {
  multipleSelection.value.length && (dialogTypeVisible.value = true)
}

const handleDelete = (index: number, row: Word) => {
  ElMessageBox.confirm('确定删除本条消息?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteWord(row.id, index)
  })
}

const deleteWord = async (id: number, index: number) => {
  const res = await manager.word.delete({ id })
  if (res.code === 0) {
    tableData.value.splice(index, 1)
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  }
}

const handleTypeConfirm = async () => {
  const ids = [] as number[]
  multipleSelection.value.map((selection: Word) => {
    selection.id && ids.push(selection.id)
  })

  const params = { ids: ids.join(','), type: ListType.value }

  const res = await manager.word.editTypeList(params)

  if (res.code === 0) {
    dialogTypeVisible.value = false
    ElMessage.success('修改成功')
  }
}

const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}

const eidt = async () => {
  const id = currentId.value
  const { enWord, zhWord, enFullWord, type } = form
  const res = id
    ? await manager.word.edit({
      id,
      enWord,
      zhWord,
      enFullWord,
      type
    })
    : await manager.word.add({
      enWord,
      zhWord,
      enFullWord,
      type
    })
  if (res.code === 0) {
    getList()
    dialogFormVisible.value = false
  } else {
    window.location.href = '/'
  }
}

const getList = async () => {
  const res = await manager.word.getList({
    word: word.value,
    current: current.value,
    size: size.value
  })
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  } else {
    window.location.href = '/'
  }
}

const handleConfirm = () => {
  eidt()
}

const handleCurrentChange = (val: number) => {
  current.value = val
  getList()
}

const handleAdd = () => {
  currentId.value = 0
  form.enWord = ''
  form.zhWord = ''
  form.enFullWord = ''
  form.type = ''
  dialogFormVisible.value = true
}

const handleEdit = (index: number, row: Word) => {
  currentId.value = row.id
  const { enWord, zhWord, enFullWord, type } = row
  form.enWord = enWord
  form.zhWord = zhWord
  form.enFullWord = enFullWord
  form.type = type
  dialogFormVisible.value = true
}

const getCategoryList = async () => {
  const res = await manager.category.getAll()
  if (res.code === 0) {
    categoryList.value = res.data
    res.data.map((category: Category) => {
      typeMap.set(category.id, category)
    })
  }
}

onMounted(() => {
  getList()
  getCategoryList()
})
</script>
<style lang="scss" scoped>
.table {
  width: 950px;
  margin: 20px auto;

  .table-header {
    margin: 15px 0;

    .el-input {
      width: 350px;
      float: right;
    }
  }

  .el-pagination {
    margin: 10px auto 5px;
  }
}
</style>
